<template>
  <div class="manager-bar">
    <span> 购买数量: {{ cartStore.number }} </span>
    <span @click="switchManagerStatus">{{ delManager ? "取消" : "管理" }}</span>
  </div>
  <div class="item-container">
    <div class="item" v-for="item in cartStore.items" :key="item.goodsId">
      <van-checkbox v-model="item.selected" />
      <van-card
        :num="item.number"
        :price="item.price"
        :title="item.name"
        :thumb="item.pic"
      >
        <template #footer>
          <van-stepper
            v-model="item.number"
            @change="addItemNumber(item.key, item.number)"
          />
        </template>
      </van-card>
    </div>
  </div>
  <van-submit-bar :price="cartStore.price * 100" button-text="提交订单">
    <van-checkbox v-model="allChecked">全选</van-checkbox>
    <template #button>
      <div>
        <van-button v-if="!delManager" block type="danger" round @click="onSubmit"
          >提交</van-button
        >
        <van-button v-else block type="warning" round @click="delItem">删除</van-button>
      </div>
    </template>
  </van-submit-bar>
  <Tabbar />
</template>

<script setup lang="ts" name="CartPage">
import { computed, ref } from "vue";
import Tabbar from "@/components/Tabbar.vue";
import useCartStore from "@/stores/cart";
const cartStore = useCartStore();

// 增加商品的购买数量
const addItemNumber = (key: string, number: number) => {
  cartStore.changeItemNum(key, number);
};

const delManager = ref(false); // 是否处于删除管理状态
const switchManagerStatus = () => {
  delManager.value = !delManager.value;
};
// 定义全选状态
const allChecked = computed({
  get() {
    return cartStore.items.every((item) => item.selected);
  },
  set(val) {},
});
const onSubmit = () => {};
</script>

<style scoped lang="scss">
.item-container {
  position: fixed;
  left: 0;
  right: 0;
  top: 40px;
  bottom: 100px;
  overflow-y: auto;
  .item {
    padding: 0 10px;
    background-color: #fff;
    display: flex;
    .van-card {
      flex: 1;
    }
  }
}

.manager-bar {
  padding: 0 10px;
  height: 40px;
  background-color: #fff;
  width: 100%;
  position: fixed;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.van-submit-bar {
  bottom: 50px;
}
</style>
